
<template>
  <div class="form">
    <el-form
      :model="ruleForm"
      :ref="ruleForm"
      :rules="rules"
      label-width="140px"
      class="demo-ruleForm"
    >
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="上级分类" prop="parentId">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域" @change="select">
          <el-option v-for="item in sort" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量单位" prop="productUnit" required>
        <el-input v-model="ruleForm.productUnit"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="ruleForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否显示" prop="showStatus">
        <el-radio-group v-model="ruleForm.showStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否显示在导航栏" prop="navStatus">
        <el-radio-group v-model="ruleForm.navStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分类图标" prop="icon">
        <el-upload :action="uploadUrl()">
          <el-button type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip" style="color:red">只能上传jpg/png文件，且不超过10MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="筛选属性">
      <el-cascader :options="attribute" :props="SetKesDept" @change="handleChange"></el-cascader>
        <el-button>删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addDomain()">新增</el-button>
      </el-form-item>
      <el-form-item label="关键字" prop="keywords">
        <el-input v-model="ruleForm.keywords"></el-input>
      </el-form-item>
      <el-form-item label="分类描述" prop="description">
        <el-input v-model="ruleForm.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm(ruleForm)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style>
.form {
  width: 800px;
  border: 1px solid #ebeef5;
  margin: 0px auto;
}
.el-input {
  width: 500px;
}
.el-form-item {
  margin-bottom: 22px;
  margin-top: 22px;
}
</style>

<script>
export default {
  data() {
    return {
       value: [],
      sort: [],
      attribute: [],
      SetKesDept: {
        value: "id",
        label: "name",
        children: "productAttributeList"
      },
      ruleForm: {
        region: "无上级分类",
        description: null,
        icon: null,
        keywords: null,
        name: null,
        navStatus: 0,
        parentId: 0,
        productAttributeIdList: [0],
        productUnit: null,
        showStatus: 0,
        sort: 0
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },
      attribute: [],
      dynamicValidateForm: {
        domains: [
          {
            value: ""
          }
        ]
      }
    };
  },
  methods: {
    select(data) {
      this.ruleForm.parentId = data;
    },
    submitForm() {
      this.$confirm("是否提交数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var that = this;
          this.$axios
            .post("/productCategory/create", {
              description: that.ruleForm.description,
              icon: that.ruleForm.icon,
              keywords: that.ruleForm.keywords,
              name: that.ruleForm.name,
              navStatus: that.ruleForm.navStatus,
              parentId: that.ruleForm.parentId,
              productAttributeIdList: [0],
              productUnit: that.ruleForm.productUnit,
              showStatus: that.ruleForm.showStatus,
              sort: that.ruleForm.sort
            })
            .then(function(ret) {
              console.log(ret);
              that.$router.push("/ProductClassify");
            });
          this.$message({
            type: "success",
            message: "提交成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });
    },

    uploadUrl: function() {
      return "http://172.16.82.63:8080/uploadPath";
    },
    resetForm(formName) {
      this.$message({
        message: "已重置",
        type: "success"
      });
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now()
      });
    },
    productAttribute() {
      this.$axios.get("/productAttribute/category/list/withAttr").then(ret => {
        var that = this
        that.attribute = ret.data.data
        console.log(that.attribute);
      })
      this.$axios.get("/productCategory/list/withChildren").then(ret => {
        var that = this
        that.sort = ret.data.data
        console.log(that.sort);
      })
    },
     handleChange(value) {
      console.log(value);
    }
  },
  mounted() {
    this.productAttribute();
  }
};
</script>